/*
 * @Author: GY19531 418941369@qq.com
 * @Date: 2022-09-05 14:47:43
 * @LastEditors: GY19531 418941369@qq.com
 * @LastEditTime: 2022-09-06 03:14:28
 * @FilePath: \one-web\src\pages\RemindManage\Component\JoinRemindPeopleCenter.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import MyIcon from '@/components/MyIcon';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { AutoComplete, Card, Checkbox, Col, Empty, Input, Tooltip } from 'antd';
import React, { ChangeEvent, useContext, useMemo, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { IActionEnum, RemindPeopleContext } from '../common';
import pageStyles from '@/common/pageLayout.less';
import '../common/index.less';
const JoinRemindPeopleCenter = () => {
  /**
   * @description: 解构context
   * @return {*}
   */
  const {
    updateDispath,
    centreUserRows,
    joinCheckBoxKeys,
    copyCheckBoxKeys,
    joinCheckBoxRows,
    copyCheckBoxRows,
  } = useContext(RemindPeopleContext);

  /**
   * 保存搜索值
   */
  const [centreSearchValue, setCentreSearchValue] = useState<string>('');

  /**
   * 搜索下拉菜单
   */
  const autoOptionCentre = useMemo(() => {
    let option: Record<string, any>[] = [];
    const tileTreeData = (data: Record<string, any>[]) => {
      data?.forEach((item) => {
        const name = item?.realName;
        if (name?.includes(centreSearchValue)) {
          const nameLength = name?.length;
          const select = name?.search(centreSearchValue);
          const searchLength = centreSearchValue?.length;
          const afterStr = name?.slice(0, select);
          const selectStr = centreSearchValue;
          const beforeStr = name?.slice(select + searchLength, nameLength);
          option.push({
            value: name,
            key: item?.id,
            label: (
              <div>
                <span>{afterStr}</span>
                <span style={{ color: '#f50' }}>{selectStr}</span>
                <span>{beforeStr}</span>
              </div>
            ),
            itemrowobj: { ...item },
          });
        }
      });
    };
    console.log('centreUserRows', centreUserRows);
    tileTreeData(centreUserRows);
    return option;
  }, [centreUserRows, centreSearchValue]);
  /**
   *  点击搜索
   * @param value
   * @param option
   */
  const onAutoSelectCentre = (value: string, option: any) => {
    const optionId = option?.key;
    setCentreSearchValue(value);
    setTimeout(() => {
      scrollToAnchor(optionId);
    }, 1000);
  };
  // 滚动定位
  const scrollToAnchor = (id: string) => {
    let anchorElement = document.getElementById(id + 'cardCentreUser');
    if (id) {
      anchorElement?.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'start',
      });
    }
  };

  /**
   * 搜索框改变
   * @param e
   */
  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setCentreSearchValue(e.target.value);
  };

  const centreRows = useMemo(() => {
    return centreUserRows;
  }, [centreUserRows]);
  console.log('centreUserRows,', centreUserRows);

  /**
   * 点击选中与取消
   */
  const clickCheckClose = (checkID: string, checkObj: Record<string, any>) => {
    if (joinCheckBoxKeys?.includes(checkID)) {
      let newCheckKeys: any = joinCheckBoxKeys?.filter((item: any) => {
        return item != checkID;
      });
      let newCheckRows: any = joinCheckBoxRows?.filter((item: any) => {
        return item?.id != checkID;
      });
      updateDispath({
        type: IActionEnum.CENTRE_CHECKBOX_KEYS,
        payload: newCheckKeys,
      });
      updateDispath({
        type: IActionEnum.CENTRE_CHECKBOX_ROWS,
        payload: newCheckRows,
      });
    } else {
      let newCheckKeys: any = [...joinCheckBoxKeys, checkID];
      let newCheckRows: any = [...joinCheckBoxRows, checkObj];
      updateDispath({
        type: IActionEnum.CENTRE_CHECKBOX_KEYS,
        payload: newCheckKeys,
      });
      updateDispath({
        type: IActionEnum.CENTRE_CHECKBOX_ROWS,
        payload: newCheckRows,
      });
    }
  };

  return (
    // <div style={{height:"100%", padding: "8px", minWidth: "25%" }}>
    <Col span={6}>
      <Card
        bordered
        title={
          <>
            <AutoComplete
              style={{ width: '100%' }}
              options={autoOptionCentre}
              notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
              onSelect={onAutoSelectCentre}
            >
              <Input
                suffix={<SearchOutlined />}
                onChange={onInputChange}
                placeholder="请按名称搜索"
                allowClear
              />
            </AutoComplete>
          </>
        }
      >
        <ScrollBarLayout
          style={{
            height: document.body.clientHeight * 0.4,
            padding: '10px 0px',
          }}
        >
          <div style={{ paddingBottom: '10px' }}>
            {centreRows && centreRows?.length > 0 ? (
              <>
                {centreRows.map((item: any, index: any) => {
                  const name = item?.realName;
                  const nameLength = name?.length;
                  const select = name?.search(centreSearchValue);
                  const searchLength = centreSearchValue?.length;
                  const afterStr = name?.slice(0, select);
                  const selectStr = centreSearchValue;
                  const beforeStr = name?.slice(
                    select + searchLength,
                    nameLength,
                  );
                  const titleTree =
                    select > -1 && selectStr ? (
                      <Tooltip title={name}>
                        <span className={pageStyles['over-flow-hidden']}>
                          {afterStr}
                          <span style={{ color: '#f50' }}>{selectStr}</span>
                          {beforeStr}
                        </span>
                      </Tooltip>
                    ) : (
                      <Tooltip title={name}>
                        <span className={pageStyles['over-flow-hidden']}>
                          {name}
                        </span>
                      </Tooltip>
                    );
                  return (
                    <div
                      style={{ paddingTop: index == 0 ? '0px' : '' }}
                      className={'rightFather'}
                      id={item?.id + 'cardCentreUser'}
                      key={item?.id + 'cardCentreUser'}
                    >
                      <div className={'rightChild'}>
                        <div className={'rightChildIcon'}>
                          <div style={{ margin: '0px 5px 0px 10px' }}>
                            <MyIcon type={'icon-user'} />
                          </div>
                          <div style={{ padding: '5px 0px', width: '100%' }}>
                            {titleTree ?? '--'}
                          </div>
                        </div>
                        <span
                          style={{
                            margin: '0px 10px',
                          }}
                        >
                          <Checkbox
                            checked={
                              joinCheckBoxKeys?.includes(item?.id)
                                ? true
                                : false
                            }
                            onChange={(e) => {
                              clickCheckClose(item?.id, item);
                            }}
                          />
                        </span>
                      </div>
                    </div>
                  );
                })}
              </>
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
          </div>
        </ScrollBarLayout>
      </Card>
    </Col>
    // {/* </div> */}
  );
};
export default JoinRemindPeopleCenter;
